<!-- Recruitment statistics 招聘统计 -->
<template>
  <div class='recruitment statistics recruitmentStatistics'>
    <!-- 头部 -->
    <echartsHeader title="招聘统计" />
    <br />
    <div class="contents">
      <el-form label-position="right" ref="query" :model="query" :rules="rulesForm">
        <selectOption labelTitle="区县:">
          <QXSelect :value="query.area" @parentEvent="getQXChild" ref="QXDome"></QXSelect>
        </selectOption>

        <selectOption labelTitle="行业:">
          <HYSelect :value="query.tradeArr" @parentEvent="getHYChild" ref="HYDome" :type="0"></HYSelect>
        </selectOption>

        <selectOption labelTitle="性质:">
          <XZSelect :value="query.nature" @parentEvent="getXZChild" ref="XZDome"></XZSelect>
        </selectOption>

        <selectOption labelTitle="规模:">
          <GMSelect :value="query.scale" @parentEvent="getGMChild" ref="GMDome"></GMSelect>
        </selectOption>

        <selectOption labelTitle="年龄要求:">
          <el-form-item class="mini_item" prop="startMaxAge">
            <el-select v-model="query.startMaxAge" filterable placeholder="请选择" :popper-append-to-body="false">
              <el-option v-for="item in 45" :key="item" :value="item+15"></el-option>
            </el-select>
            -
            <!-- </el-form-item>
          <el-form-item label="-" class="mini_item" prop="endMaxAge"> -->
            <el-select v-model="query.endMaxAge" filterable placeholder="请选择" :popper-append-to-body="false">
              <el-option v-for="item in 45" :key="item" :value="item + 15"></el-option>
            </el-select>
          </el-form-item>
        </selectOption>

        <selectOption labelTitle="学历:">
          <XLSelect :value="query.education" @parentEvent="getXLChild" ref="XLDome"></XLSelect>
        </selectOption>

        <selectOption labelTitle=" " class="btn resize">
          <el-button type="primary" @click="searchQuery('query')">查询</el-button>

          <el-button type="primary" @click="resize('query')">重置</el-button>
        </selectOption>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headClass" :cell-style="rowClass"
        :row-class-name="tableRowClassName">
        <el-table-column prop="titleName" width="180">
        </el-table-column>
        <el-table-column prop="toDay" label="今日" width="180">
        </el-table-column>
        <el-table-column prop="yesTerDay" label="昨日" width="180">
        </el-table-column>
        <el-table-column prop="nearly7Days" label="近7天" width="180">
        </el-table-column>
        <el-table-column prop="nearly30Days" label="近30天" width="180">
        </el-table-column>
        <el-table-column prop="chart" label="趋势" width="300">
          <template slot-scope="scope">
            <div :id="`main${scope.$index}`" style="height:50px;width:300px;"></div>
          </template>
        </el-table-column>
        <el-table-column label=" 操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,scope.$index)" type="primary" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" width="30%;" style="background:#ffffff36;" top="200px" center>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <div id="dialogC"></div>
    </el-dialog>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import bus from '@/components/common/bus';
import { statisticsGet } from '@/api/enterpriseQuantityStatistics';
export default {
  components: {},
  data () {
    // 校验年龄
    let checkAge = (rule, value, callback) => {
      if (this.query.startMaxAge > this.query.endMaxAge) {
        callback(new Error('年龄选择错误'));
      } else {
        callback();
        this.$refs['query'].clearValidate()
      }
    };
    return {
      query: {
        // 区县
        area: '',
        // 行业
        tradeArr: '',
        // 性质
        nature: '',
        // 规模
        scale: '',
        // 学历
        education: '',
        // 年龄要求
        startMaxAge: 16,
        endMaxAge: 60,
      },
      tableData: [
        {
          titleName: '发布职位的企业数量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [], //时间,
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: [] // 数据
              }
            ]
          }
        }, {
          titleName: '职位发布数量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: [120, 132, 1001, 134, 90, 230, 210]
              }
            ]
          }
        }, {
          titleName: '总投递量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: [120, 1032, 1001, 134, 90, 230, 210, 100, 132, 101, 1304, 90, 230, 210]
              }
            ]
          }
        }, {
          titleName: '面试邀请发送量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: []
              }
            ]
          }
        }, {
          titleName: '招聘人数',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: ['Mon', 'Tue'],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: [120, 132]
              }
            ]
          }
        }, {
          titleName: '职位曝光量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: []
              }
            ]
          }
        }, {
          titleName: '发起聊天量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: []
              }
            ]
          }
        }, {
          titleName: '总点击量',
          toDay: '2016-05-03',
          yesTerDay: '',
          nearly7Days: '',
          nearly30Days: '',
          chart: {
            legend: [],
            xAxis: [],
            series: [
              {
                itemStyle: {
                  normal: {
                    color: '#3856ae',
                    lineStyle: {
                      color: '#3856ae'
                    }
                  }
                },
                symbol: 'none',  //取消折点圆圈
                smooth: true,  //折线平滑
                name: '数量',
                type: 'line',
                stack: '总量',
                data: []
              }
            ]
          }
        }
      ],
      config: {
        dataZoom: {
          show: true
        }
      },
      rulesForm: {
        endMaxAge: [{ validator: checkAge }],
        startMaxAge: [{ validator: checkAge }]
      },
      centerDialogVisible: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    headClass () {
      return 'text-align: center;color:#e5e5e5;background:#042C9B!important;'
    },
    rowClass () {
      return 'text-align:center;color:#fff;'
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      } else if (rowIndex % 2 == 1) {
        return 'success-row';
      }
      return '';
    },
    // 图表
    optionPies (i, itemData) {
      // 必须传参
      itemData.series[0].itemStyle.normal.color = '#3856ae'
      itemData.series[0].symbol = 'none'
      let option_pie = MyEcharts.EchartsOption.LineJob('', '', itemData)
      MyEcharts.initChart(option_pie, 'main' + i)
    },
    optionChart () {
      for (let i = 0; i < this.tableData.length; i++) {
        setTimeout(() => {
          this.optionPies(i, this.tableData[i].chart)
        }, 500)
      }
    },
    handleClick (imy, i) {
      console.log(imy)
      this.centerDialogVisible = true
      setTimeout(res => {
        this.tableData[i].chart.series[0].symbol = 'block'
        this.tableData[i].chart.series[0].itemStyle.normal.color = '#fff'
        let option_pie5 = MyEcharts.EchartsOption.Line('', '', this.tableData[i].chart)
        MyEcharts.initChart(option_pie5, 'dialogC')
      }, 500)
    },
    // 获取区县子组件传过来的区县数据
    getQXChild (val) {
      this.query.area = val;
      this.query.currentResidence = val
    },
    // 获取行业子组件传过来的行业数据
    getHYChild (val) {
      this.query.tradeArr = val;
    },
    // 获取性质子组件传过来的性质数据
    getXZChild (val) {
      this.query.nature = val;
    },
    // 获取规模子组件传过来的规模数据
    getGMChild (val) {
      this.query.scale = val;
    },
    // 获取学历子组件传过来的规模数据
    getXLChild (cValue) {
      // 接收子组件传过来的值
      this.query.education = cValue
    },
    // 对查询条件进行搜索
    searchQuery (formName) {
      console.log(this.query)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.statisticsGet()
        }
      })
    },
    // 重置
    resize (formName) {
      this.query = {
        // 年龄要求
        startMaxAge: 16,
        endMaxAge: 60,
      }
      // 调用子组件的方法，清空选中的行业【清空时必须分别清空】
      this.$refs.QXDome.clearContent();
      this.$refs.HYDome.clearContent();
      this.$refs.XZDome.clearContent();
      this.$refs.GMDome.clearContent();
      this.$refs.XLDome.clearContent();
      this.$refs[formName].resetFields();
      this.query.startAge = 16;
      this.query.endAge = 60;
      // this.query.startMaxAge = 16;
      // this.query.endMaxAge = 60;

      this.statisticsGet()
    },
    statisticsGet () {
      // let obj = {
      //   "area": null,//区县
      //   "trade": null,//行业
      //   "nature": null,//性质
      //   "scale": null,//规模
      //   "startMaxAge": null,//年龄要求开始
      //   "endMaxAge": null,//年龄要求结束
      //   "education": null//学历要求
      // }
      statisticsGet(this.query).then(res => {
        if (res.success) {
          let resDate = Object.keys(res.data)
          resDate.map((item, i) => {
            this.tableData[i].toDay = res.data[item].toDay
            this.tableData[i].yesTerDay = res.data[item].yesTerDay
            this.tableData[i].nearly7Days = res.data[item].nearly7Days
            this.tableData[i].nearly30Days = res.data[item].nearly30Days
            this.tableData[i].chart.xAxis = res.data[item].date.reverse()
            this.tableData[i].chart.series[0].data = res.data[item].count.reverse()
          })
          this.optionChart()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created () {
    bus.$on('optionPiesSize', msg => {
      this.searchQuery('query')
    });

  },
  mounted () {
    this.headClass()
    this.rowClass()
    // 获取图表信息
    this.searchQuery('query')

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.recruitmentStatistics {
    /* position: relative;
    height: 100%; */
    background: #080850;
}
.contents {
    width: 96%;
    margin: 0 auto;
    padding-bottom: 20px;
    background: #08085f;
    /* border: 1px dashed #fff; */
}

.contents /deep/ .el-table {
    width: 96% !important;
    margin: 0 auto;
    border: 1px solid #042c9b;
    border-top: none;
    background-color: #080850;
}

.contents /deep/ .el-table .warning-row {
    background: #08085f;
}

.contents /deep/ .el-table .success-row,
.contents /deep/ .el-table tbody tr:hover > td {
    background-color: #151672 !important;
}

/* 移除table组件hover背景色 */
.el-table__row:hover > td {
    background: #151672 !important;
}
.contents /deep/ .el-table .cell {
    overflow: initial;
}

.contents /deep/ .el-table::before {
    background-color: #080850;
}
.contents /deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
    background-color: #080850;
}

.contents /deep/ .el-button {
    background: rgba(16, 69, 218, 1);
    border: none;
    color: rgba(255, 255, 255, 1);
}

.contents /deep/ .el-table th.is-leaf,
.contents /deep/ .el-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.mini_item {
    height: 50px;
    line-height: 50px;
    color: #fff;
}
.mini_item /deep/ .el-input--suffix {
    width: 100px;
}

#dialogC {
    min-height: 270px;
}

.recruitmentStatistics /deep/ .el-dialog {
    background: #08085f;
}
</style>